<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>省份城市的三级联动</title>
</head>
<body>
<select id="province">
    <option value="-1">请选择</option>
</select>
<select id="city"></select>
<select id="country"></select>
</body>
<script type="text/javascript">
    /**
     * @Description:
     * @author 朱志文
     * @date 2021/9/24
     */
    /*省份数组*/
    var provinceArr = ['江苏', '浙江', '上海'];
    /*城市数组*/
    var cityArr = [
        ['苏州市', '南京市', '扬州市'],
        ['杭州市', '宁波市', '温州市'],
        ['上海市']];
    /*区域数组*/
    var countryArr = [
        [
            ['虎丘区', '吴中区', '相城区', '姑苏区', '吴江区'],
            ['玄武区', '秦淮区', '建邺区', '鼓楼区', '浦口区'],
            ['邗江区', '广陵区', '江都区']
        ],
        [
            ['上城区', '西湖区', '余杭区'],
            ['海曙区', '江北区', '镇海区', '鄞州区', '北仑区'],
            ['鹿城区', '瓯海区', '洞头区']
        ],
        [
            ['黄浦区', '静安区', '长宁区', '浦东区']
        ]
    ];

    function createOption(obj, data) {
        for (var i in data) {
            var op = new Option(data[i], i);
            obj.options.add(op);
        }
    }

    var province = document.getElementById("province");
    createOption(province, provinceArr);

    var city = document.getElementById('city');
    province.onchange = function () {
        city.options.length = 0;
        createOption(city, cityArr[province.value]);
        /*以下是新增代码*/
        if (province.value >= 0) {
            city.onchange();
        } else {
            city.options.length = 0;
        }
    }

    var country = document.getElementById('country');
    city.onchange = function () {
        country.options.length = 0;
        createOption(country, countryArr[province.value][city.value]);
    }

</script>
</html>